import Vue from 'vue'
import VueRouter from 'vue-router'
import { getToken } from '@/utils/storage'

const Register = () => import('@/views/MyRegister.vue')
const Login = () => import('@/views/MyLogin.vue')
const MyDetails = () => import('@/views/MyDetails.vue')
const LayOut = () => import('@/views/LayOut.vue')
const MyArticle = () => import('@/views/MyArticle.vue')
const MyCollection = () => import('@/views/MyCollection.vue')
const MyLike = () => import('@/views/MyLike.vue')
const MySetting = () => import('@/views/MySetting.vue')
const NotFound = () => import('@/views/NotFound.vue')

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/article',
    component: LayOut,
    children: [
      {
        path: '/article',
        name: 'MyArticle', // 确保name与组件name一致
        component: MyArticle,
        meta: {
          title: '面经',
          keepAlive: true,
          scrollTop: 0 // 用于保存滚动位置
        }
      },
      {
        path: '/collection',
        name: 'MyCollection',
        component: MyCollection,
        meta: {
          title: '收藏',
          keepAlive: true,
          scrollTop: 0
        }
      },
      {
        path: '/like',
        name: 'MyLike',
        component: MyLike,
        meta: {
          title: '喜欢',
          keepAlive: true,
          scrollTop: 0
        }
      },
      {
        path: '/setting',
        name: 'MySetting',
        component: MySetting,
        meta: {
          title: '我的',
          keepAlive: true,
          scrollTop: 0
        }
      }
    ]
  },
  {
    path: '/register',
    name: 'Register',
    component: Register,
    meta: {
      title: '注册',
      keepAlive: false
    }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
    meta: {
      title: '登录',
      keepAlive: false
    }
  },
  {
    // 配置动态路由
    path: '/details/:id',
    name: 'Details',
    component: MyDetails,
    meta: {
      title: '详情',
      keepAlive: false
    }
  },
  {
    path: '/404',
    name: 'NotFound',
    component: NotFound,
    meta: {
      title: '404',
      keepAlive: false
    }
  },
  {
    path: '*',
    redirect: '/404'
  }
]

const router = new VueRouter({
  routes,
  scrollBehavior (to, from, savedPosition) {
    // 如果有保存的位置，使用保存的位置
    if (savedPosition) {
      return savedPosition
    } else if (to.meta.scrollTop) {
      // 使用路由meta中保存的滚动位置
      return { x: 0, y: to.meta.scrollTop }
    } else {
      // 默认滚动到顶部
      return { x: 0, y: 0 }
    }
  }
})
// 部署前置守卫  (只允许未登录的用户访问注册页和登录页  使用是否有登录权证token来判断)
router.beforeEach((to, from, next) => {
  const token = getToken()
  const IsPublicPath = ['/register', '/login', '/404'].includes(to.path)
  if (token) { return next() }
  IsPublicPath ? next() : next('/login')
})

// 避免重复跳转报错
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => {
    if (err.name !== 'NavigationDuplicated') throw err
  })
}

export default router
